<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="24" type="flex">
        <el-col :span="10">
          <NewCard :title="title">
            <!-- <div class="tabOne">
              <div
                class="tablist"
                :class="statusactiv == 1 ? 'isActive' : ''"
                @click="review()"
              >
                <img src="~@/assets/images/htzs_icon_nor.png" class="imgnor" />
                <img src="~@/assets/images/htzs_icon_sel.png" class="imgsel" />
                <el-button round>合同智审</el-button>
              </div>
              <div
                class="tablist"
                :class="statusactiv == 2 ? 'isActive' : ''"
                @click="simulation()"
              >
                <img src="~@/assets/images/ssmn_icon_nor.png" class="imgnor" />
                <img src="~@/assets/images/ssmn_icon_sel.png" class="imgsel" />
                <el-button round>诉讼模拟</el-button>
              </div>
            </div> -->
            <!-- 审核状态切换 -->
            <div class="auditBox" v-if="statusactiv == 1">
              <!-- 1审核上传合同 -->
              <div class="uploadBox" v-if="auditState == 1">
                <img src="~@/assets/images/htzs_img.png" alt="" />
                <p>
                  新一代合同智能审批流程，在线修订留痕、OCR<br />文本对比、风险语义提取、智能评审等功能
                </p>
                <p>开箱即用，跳出效率低谷。</p>
                <el-upload
                  :on-change="change"
                  :auto-upload="autoUpload"
                  class="upload-demo"
                  :action="`${address}/base/contractVerify/aiVerify`"
                  multiple
                  :limit="1"
                  :file-list="fileList"
                  ref="upload"
                  :headers="headers"
                  :on-progress="onUpload"
                  :on-success="upoloadSuccess"
                  :on-error="upoloadErr"
                  accept=".jpg, .png, .pdf,.docx"
                >
                  <el-button round>上传合同文件</el-button>
                </el-upload>
                <span>仅支持jpg、png、pdf、docx格式的简体中文文件</span>
              </div>
              <!-- 2审核中 -->
              <div class="inReview" v-else-if="auditState == 2">
                <div class="progressBar">
                  <el-progress
                    type="circle"
                    :percentage="progressPercent"
                    :stroke-width="14"
                    color="#BBBAC2"
                  ></el-progress>
                  <p>{{ filename }}</p>
                  <span>文件审核中，约10分钟完成...</span>
                  <div v-if="error">
                    <span>审核失败</span>
                    <el-button @click="onemore" round>重新审核</el-button>
                  </div>
                </div>
              </div>
              <!-- 3审核完成 -->
              <div class="reviewOk" v-else>
                <div class="progressBar">
                  <el-progress
                    type="circle"
                    :percentage="100"
                    :stroke-width="14"
                    color="#BBBAC2"
                  ></el-progress>
                  <p>{{ filename }}</p>
                  <span>审核完成</span>
                  <el-button @click="onemore" round>再审一份</el-button>
                </div>
              </div>
            </div>
            <div v-if="statusactiv == 2">
              <Simulation
                @lastreport="lastreport"
                @showpaystatus="showpaystatus"
              ></Simulation>
            </div>
          </NewCard>
        </el-col>
        <el-col :span="14">
          <div class="auditResult" v-if="auditState == 3">
            <AuditResult :auditdata="auditdata"></AuditResult>
          </div>
          <div class="featuredContent" v-show="showpay == 1">
            <FeaturedContent></FeaturedContent>
          </div>
          <div v-if="showpay == 2">
            <Pay></Pay>
          </div>
          <div v-show="showpay == 3">
            <GetReport @changeStatus="test"></GetReport>
          </div>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import AuditResult from "./auditResult.vue";
import FeaturedContent from "@/components/FeaturedContent/index.vue";
import Simulation from "../simulation/index.vue";
import GetReport from "../simulation/getReport.vue";

import NewCard from "@/wss/components/newCard.vue";
import Pay from "../simulation/Pay.vue";
import { getToken } from "@/utils/auth.js";
export default {
  name: "ContractAudit",
  components: {
    NewCard,
    FeaturedContent,
    AuditResult,
    Simulation,
    Pay,
    GetReport,
  },
  data() {
    return {
      error: false,
      statusactiv: this.$route.meta.id, //高亮
      title: this.$route.meta.title, //路由名称
      // status:1,//默认选中第一项
      showpay: 1, //支付
      address: process.env.VUE_APP_BASE_API,
      auditState: 1, //1审核上传合同界面 2审核中界面 3审核完成界面
      autoUpload: true,
      progressPercent: 0,
      auditdata: {},
      headers: {
        Authorization: getToken(),
      },
      fileList: [], //上传的合同文件
      filename: "",
    };
  },
  mounted() {
    this.$bus.$on("tofather", (item, e) => {
      this.showpay = e;
    });
  },
  methods: {
    test() {
      this.showpay = 3;
    },
    onUpload(event, file, fileList) {
      this.filename = file.name;

      //三个参数看情况使用
      this.auditState = 2;
      //使用定时器来制作进度条
      this.timer = setInterval(() => {
        console.log("1");
        this.progressPercent++;
        //这里之所以到75%就结束定时器，下面具体解释
        if (this.progressPercent == 75) {
          clearInterval(this.timer);
          this.$message({
            message: "解析失败",
            type: "error",
          });
          this.error = true;
          this.timer = null;
        }
      }, 1000);
    },
    //上传成功
    upoloadSuccess(res, file, fileList) {
      //三个参数看情况使用
      // 清除上传文件列表
      console.log(res, "res");
      // 必须在上传成功之后 进度条继续++
      if (res.data && res.data.code == 200) {
        // 创建一个完成后的定时器，会在progressPercent = 75 的基础上继续增加
        this.finishtimer = setInterval(() => {
          if (this.progressPercent < 100) {
            this.progressPercent++;
            if (this.progressPercent == 100) {
              clearInterval(this.finishtimer);
              clearInterval(this.timer);
              this.finishtimer = null;
              this.progressPercent = 0;
              this.auditdata = res.data.data;
              this.auditState = 3;
              this.showpay = 4;
              console.log(this.showpay, "11111");
            }
          }
        }, 100);
      } else {
      }
    },
    onemore() {
      (this.auditState = 1), (this.showpay = 1);
    },
    //上传失败
    upoloadErr() {
      this.$message({
        message: "上传失败请重新上传",
        type: "error",
      });
      this.auditState = 1;
    },
    change() {
      this.auditState = 2;
    },
    review() {
      this.statusactiv = 1;
      this.showpay = 1;
    },
    simulation() {
      this.statusactiv = 2;
      this.showpay = 1;
      this.auditState = 1;
      console.log(this.showpay, "this.showpay");
    },
    showpaystatus(e) {
      this.showpay = e;
    },
    lastreport(e) {
      this.showpay = e;
      // console.log(e,"fff")
    },
    payinfo(e) {
      console.log(e, "eeee");
    },
  },
};
</script>

<style scoped>
/* 高度 */
::v-deep .label-box-content,
::v-deep .label-box-content .el-row,
::v-deep .label-box-content .el-col,
::v-deep .label-box-content .el-col > div,
::v-deep .label-box-content .el-card,
::v-deep .label-box-content .el-card__body {
  height: 100%;
}
::v-deep .el-card__body {
  position: relative;
  padding: 0 30px;
}
::v-deep .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
::v-deep .label-box-content .el-card__body > div::-webkit-scrollbar {
  width: 0px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pd30 {
  padding: 0 30px;
}
/* 一级 */
.tabOne {
  display: flex;
  justify-content: space-evenly;
  border: 1px solid #e5e6e9;
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 26px 0;
  margin-top: 15px;
}
.tabOne .tablist {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.tabOne .tablist img {
  width: 36px;
}
.tabOne .tablist img.imgsel {
  display: none;
}
.tabOne .tablist.isActive img.imgsel {
  display: block;
}
.tabOne .tablist.isActive img.imgnor {
  display: none;
}

.tabOne .tablist button {
  color: #686975;
  font-size: 16px;
  font-weight: bold;
  background-color: transparent;
  border: 2px solid #c8cce2;
  padding: 6px 20px;
  margin-top: 18px;
}
.tabOne .tablist::before {
  content: "";
  display: none;
  position: absolute;
  bottom: -26px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #e5e6e9;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}
.tabOne .tablist::after {
  content: "";
  display: none;
  position: absolute;
  bottom: -27px;
  width: 0;
  height: 0;
  border-bottom: 12px solid #fff;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}

.tabOne .tablist.isActive button,
.tabOne .tablist button:hover {
  color: #fff;
  background-color: #39486f;
  border-color: #39486f;
}
.tabOne .tablist.isActive::before {
  display: block;
}
.tabOne .tablist.isActive::after {
  display: block;
}

/* 智审状态 ************ */
/* 1上传合同 */
.auditBox {
  margin: 50px 0;
}
.uploadBox {
  width: 100%;
  margin: 0 auto;
}
.uploadBox img {
  display: block;
  width: 170px;
  margin: 0 auto;
  margin-bottom: 30px;
}
.uploadBox p {
  font-size: 14px;
  line-height: 28px;
  color: #333;
  text-align: center;
  margin: 0;
}
::v-deep .uploadBox .el-upload {
  display: block;
  margin: 0 auto;
  margin-top: 30px;
}
.uploadBox .el-button {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  padding: 10px 50px;
}
.uploadBox > span {
  display: block;
  color: #bababa;
  font-size: 12px;
  text-align: center;
  margin-top: 30px;
}

/* 2审核中 */
.progressBar {
  text-align: center;
}
::v-deep .progressBar .el-progress .el-progress__text {
  color: #f87a23;
}
.progressBar p {
  font-weight: bold;
  font-size: 18px;
  color: #333;
  margin: 0;
  margin-top: 50px;
  margin-bottom: 15px;
}
.progressBar span {
  font-size: 12px;
  color: #bababa;
}
/* 审核完成 */
.progressBar .el-button {
  display: block;
  margin: 0 auto;
  margin-top: 30px;
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  padding: 10px 50px;
}
</style>